<template>
  <div>
    <cus-modal ref="modalRef" title="添加食谱模板" :showOkBtn="false" @on-visible-change="onVisibleChange" width="85"
      @onOk="onOk">

      <cusTable border ref="selection" :loading="loading" :columns="columns" :data="dataSelectList" :height="300">
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button type="text" size="small" :style="{ color: '#1E6FFF', padding: '0 8px' }"
              @onClick="showDishes(row)">
              使用
            </cus-button>

            <Poptip confirm transfer placement="left" :title="`是否确认删除该食谱模板 ？`" v-if="row.isSystemMould != 1"
              @on-ok="onDelete(row)">
              <cus-button type="text" size="small" :style="{ color: '#FF4746', padding: '0 8px' }">
                删除
              </cus-button>
            </Poptip>
          </div>
        </template>
      </cusTable>
      <div style="width: 100%; display: flex; justify-content: flex-end">
        <cus-page :data="pages" class="mt_10" @pageChange="getMouldListApi"></cus-page>
      </div>


    </cus-modal>
    <cus-modal ref="dishesRef" title="食谱菜肴" width="85" @onOk="onUseTemplate">
      <Table border :loading="loading" :columns="dishesCol" :data="dishesData" :height="400">
        <template slot-scope="{ row, index }" slot="one">
          <div class="slotBox" v-if="dishesData[index].list">
            <div class="slotBox-item" v-for="(item, idx) in dishesData[index].list" :key="idx"
              :class="{ noBorderB: (idx + 1) == dishesData[index].list.length }">
              <div :style="{ color: item.one ? 'green' : '#33A5FE' }">{{ item.one }}</div>


            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="two">
          <div class="slotBox" v-if="dishesData[index].list">
            <div class="slotBox-item" v-for="(item, idx) in dishesData[index].list" :key="idx"
              :class="{ noBorderB: (idx + 1) == dishesData[index].list.length }">
              <div :style="{ color: item.two ? 'green' : '#33A5FE' }">{{ item.two }}</div>

            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="three">
          <div class="slotBox" v-if="dishesData[index].list">
            <div class="slotBox-item" v-for="(item, idx) in dishesData[index].list" :key="idx"
              :class="{ noBorderB: (idx + 1) == dishesData[index].list.length }">
              <div :style="{ color: item.three ? 'green' : '#33A5FE' }">{{ item.three }}</div>

            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="four">
          <div class="slotBox" v-if="dishesData[index].list">
            <div class="slotBox-item" v-for="(item, idx) in dishesData[index].list" :key="idx"
              :class="{ noBorderB: (idx + 1) == dishesData[index].list.length }">
              <div :style="{ color: item.four ? 'green' : '#33A5FE' }">{{ item.four }}</div>

            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="five">
          <div class="slotBox" v-if="dishesData[index].list">
            <div class="slotBox-item" v-for="(item, idx) in dishesData[index].list" :key="idx"
              :class="{ noBorderB: (idx + 1) == dishesData[index].list.length }">
              <div :style="{ color: item.five ? 'green' : '#33A5FE' }">{{ item.five }}</div>

            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="six">
          <div class="slotBox" v-if="dishesData[index].list">
            <div class="slotBox-item" v-for="(item, idx) in dishesData[index].list" :key="idx"
              :class="{ noBorderB: (idx + 1) == dishesData[index].list.length }">
              <div :style="{ color: item.six ? 'green' : '#33A5FE' }">{{ item.six }}</div>

            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="seven">
          <div class="slotBox" v-if="dishesData[index].list">
            <div class="slotBox-item" v-for="(item, idx) in dishesData[index].list" :key="idx"
              :class="{ noBorderB: (idx + 1) == dishesData[index].list.length }">
              <div :style="{ color: item.seven ? 'green' : '#33A5FE' }">{{ item.seven }}</div>

            </div>
          </div>
        </template>
      </Table>
    </cus-modal>

  </div>
</template>
<script>
import {
  getMouldList,
  deleteMould,
  getMouldDtl,
  useOrganTemplate
} from "@/api/business/dishesModule";
export default {
  name: '',
  components: {
  },
  data() {
    return {
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "模板名称",
          key: "mouldName",
          width: 150,
          align: "center",
        },
        {
          title: "食谱类型",
          key: "cateringModeName",
          align: "center",
        },
        {
          title: "灶别",
          key: "boardRateName",
          align: "center",
        },
        {
          title: "劳动强度",
          key: "labourName",
          align: "center",
        },
        // {
        //   title: "模板类型",
        //   slot: "mouldType",
        //   align: "center",
        // },
        {
          title: "来源",
          key: "source",
          align: "center",
        },
        // {
        //   title: "创建人",
        //   width: 150,
        //   align: "center",
        // },
        // {
        //   title: "创建时间",
        //   width: 150,
        //   align: "center",
        // },
        {
          title: "操作",
          width: 200,
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      // 待选项
      dataSelectList: [],
      dishesCol: [
        {
          title: '餐次',
          key: 'name',
          align: 'center'
        },
        {
          title: '星期一',
          slot: 'one',
          align: 'center',
        },
        {
          title: '星期二',
          slot: 'two',
          align: 'center',
        },
        {
          title: '星期三',
          slot: 'three',
          align: 'center',
        },
        {
          title: '星期四',
          slot: 'four',
          align: 'center',
        },
        {
          title: '星期五',
          slot: 'five',
          align: 'center',
        },
        {
          title: '星期六',
          slot: 'six',
          align: 'center',
        },
        {
          title: '星期日',
          slot: 'seven',
          align: 'center',
        },
      ],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },

      // 已选项
      selectedList: [],
      dishesData: [],
      curMouldId: '',
      loading: false
    }
  },
  methods: {
    show() {
      this.getMouldListApi();
      this.$refs["modalRef"].show = true;
    },
    onVisibleChange() {
      this.dishesData = []
    },
    // 获取列表接口
    getMouldListApi() {
      return new Promise((resolve) => {
        let params = {
          current: this.pages.page,
          size: this.pages.pageSize,
          mouldType: 'organ'
        };
        this.loading = true;
        getMouldList(params).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.dataSelectList = res.data;
            this.pages.pageTotal = res.total;
            resolve();
          }
        });
      });
    },

    changeSelect(selection) {
      this.selectedList = selection
      console.log(selection, 34343)
    },

    // 删除
    onDelete(row) {
      deleteMould({
        mouldId: row.mouldId,
      }).then((res) => {
        if (res.retCode == 2000) {
          this.$Message.success("删除成功.");
          if (this.selectList.length == 1 && this.pages.page != 1) {
            this.pages.page--
          }
          this.getMouldListApi();
          resolve();
        }
      });
    },
    showDishes(row) {
      this.$refs['dishesRef'].show = true
      this.curMouldId = row.mouldId
      getMouldDtl({ mouldId: row.mouldId }).then((res) => {
        this.loading = false;
        if (res.retCode === 2000) {
          let bObj = { name: '早餐', mealTimes: 0, list: [] };
          let lObj = { name: '午餐', mealTimes: 1, list: [] };
          let dObj = { name: '晚餐', mealTimes: 2, list: [] };
          res.data.foodBookMoulddtlList.forEach(item => {
            if (item.mealTimes == 0) {
              bObj.list.push(item)
            }
            if (item.mealTimes == 1) {
              lObj.list.push(item)
            }
            if (item.mealTimes == 2) {
              dObj.list.push(item)
            }
          });
          this.dishesData = [bObj, lObj, dObj];
        }

      });
    },
    onUseTemplate(checkData = 0) {
      useOrganTemplate({ mouldId: this.curMouldId, checkData }).then(res => {
        if (res.retCode == 2000) {
          this.$Message.success('使用成功')
          this.$refs['dishesRef'].show = false
          this.getMouldListApi()
          this.$parent.onInit()
        } else if (res.retCode == 2888) {
          this.$Modal.confirm({
            title: "提示",
            content: "<p>有菜肴不存在，是否继续使用模板？</p>",
            onOk: () => {
              this.onUseTemplate(1);
            },
          });
        }
      })
    },
    onOk() {

      // this.$refs.selection.selectAll(true);
    }
  },
}
</script>
<style lang='scss' scoped></style>